<template>
  <a-form ref="formRef" :label-col="labelCol" :model="state">
    <a-row :justify="'start'" :gutter="24">
      <a-col v-for="(data, i) of searchFields" v-show="expand || i <= 6" :key="i" v-bind="colProps">
        <a-form-item :name="data.dataIndex" :label="data.title">
          <!-- components is方式-->
          <a-select
            v-if="data.type === 'enum'"
            v-model:value="searchState[data.dataIndex]"
            allow-clear
            :options="data.options"
          />
          <a-date-picker v-else-if="data.type === 'date'" v-model:value="searchState[data.dataIndex]" allow-clear />
          <a-range-picker
            v-else-if="data.type === 'dateRange'"
            v-model:value="searchState[data.dataIndex]"
            allow-clear
            :value-format="'YYYY-MM-DD HH:MM:ss'"
          />
          <a-input v-else v-model:value.trim="searchState[data.dataIndex]" allow-clear />
        </a-form-item>
      </a-col>

      <slot name="searchItems" :form-state="searchState" :col-props="colProps" />

      <a-col>
        <a-space :size="8">
          <a-button type="primary" @click="btnSearch">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="btnReset">
            <template #icon>
              <SyncOutlined />
            </template>
            重置
          </a-button>
          <!-- <a v-if="isShowExpandBtn" style="font-size: 12px" @click="expand = !expand">
            <template v-if="expand">
              <UpOutlined />
            </template>
            <template v-else>
              <DownOutlined />
            </template>
            <span>{{ expand ? '收起' : '展开' }}</span>
          </a> -->
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, toRefs } from 'vue';
import type { IColumn } from '@/types';
import { SearchOutlined, SyncOutlined } from '@ant-design/icons-vue';

type IState = Record<string, string | number | dayjs.Dayjs | dayjs.Dayjs[]>;

const props = defineProps({
  state: { type: Object as PropType<IState>, default: () => ({}) },
  searchFields: {
    type: Array as PropType<IColumn[]>,
    default: () => [],
  },
  'onUpdate:state': {
    type: Function,
  },
});

const emit = defineEmits(['update:state', 'search', 'reset']);
const { searchFields } = toRefs(props);
const labelCol = {
  xs: { span: 8 },
  // sm: { span: 7 },
  md: { span: 10 },
  lg: { span: 7 },
  xl: { span: 8 },
  xxl: { span: 7 },
};
const colProps = {
  xs: { span: 24 },
  // sm: { span: 12 },
  md: { span: 12 },
  lg: { span: 12 },
  xl: { span: 8 },
  xxl: { span: 6 },
};

// 是否显示收缩/展开按钮
const isShowExpandBtn = searchFields.value.length > 4;

const expand = ref(false);
const formRef = ref();
const searchState = ref<IState>({});

const btnSearch = () => {
  const params = getFormData(searchState.value);
  emit('search', params);
};
const btnReset = () => {
  formRef.value.resetFields();
  searchState.value = {};
  emit('reset');
};
const getFormData = (val: IState) => {
  const params: IState = {};
  Object.keys(val).forEach(k => {
    const separatorIndex = k.indexOf('|');
    const value = val[k];
    if (separatorIndex > 0 && separatorIndex < k.length - 1) {
      if (Array.isArray(value)) {
        const startKey = k.substring(0, separatorIndex);
        const endKey = k.substring(separatorIndex + 1);
        params[startKey] = value[0].unix();
        params[endKey] = value[1].unix() + 86400 - 1;
      }
    } else if (typeof value === 'object' && 'unix' in value) {
      params[k] = value.unix();
    } else {
      params[k] = value;
    }
  });
  return params;
};
defineExpose({
  getFormData,
});
</script>
